<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>RadioTab - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../dep/esui/3.2.0-beta.2/demo/assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="../../../dep/esui/3.2.0-beta.2/demo/assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - RadioTab</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>RadioTab</h2>
            <div class="intro">
                <p>BoxGroup的Extension</p>
                <p>由BoxGroup控制Panel显示</p>
                <p>datasource中需要包含panel的id('panel'、'panelId'或id+'Panel')</p>
            </div>
            <div class="example">
                <div data-ui-type="BoxGroup" 
                    data-ui-id="box-group-horizontal" 
                    data-ui-name="frameworks1" 
                    data-ui-box-type="radio" 
                    data-ui-box-class="ui-radio-custom"
                    data-ui-extension-radiotab-type="RadioTab"
                    ></div>
                <div id="ER">ER</div>
                <div id="ESUI">ESUI</div>
            </div>
            <div class="example">
                <div data-ui-type="BoxGroup" 
                    data-ui-id="box-group-vertical" 
                    data-ui-orientation="vertical"
                    data-ui-name="frameworks2" 
                    data-ui-box-type="radio" 
                    data-ui-box-class="ui-radio-custom"
                    data-ui-extension-radiotab-type="RadioTab"
                    ></div>
                <div id="ER2">ER2</div>
                <div id="ESUI2">ESUI2</div>
            </div>
            <div class="example">
                <div data-ui-type="BoxGroup" 
                    data-ui-id="box-group-horizontal-html" 
                    data-ui-orientation="horizontal"
                    data-ui-name="frameworks3" 
                    data-ui-box-type="radio" 
                    data-ui-box-class="ui-radio-custom"
                    data-ui-extension-radiotab-type="RadioTab"
                    data-ui-value="ER3"
                    >
                    <div>
                        <input type="radio" id="ER3" name="frameworks3" value="ER3">
                        <label for="ER3">ER3</label>
                    </div>
                    <div>
                        <input type="radio" id="ESUI3" name="frameworks3" value="ESUI3">
                        <label for="ESUI3">ESUI3</label>
                    </div>
                    <div>
                        <input type="radio" id="EF3" name="frameworks3" value="EF3">
                        <label for="EF3">EF3</label>
                    </div>
                </div>
                <div id="frameworks3-panel-0">ER3</div>
                <div id="frameworks3-panel-1">ESUI3</div>
            </div>
        </div>
    </div>
    <script src="../../../dep/esui/3.2.0-beta.2/demo/assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="../../../dep/esui/3.2.0-beta.2/demo/demo.js"></script>
    <script src="../../../dep/esui/3.2.0-beta.2/demo/assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'esui',
            'jquery',
            'esui/BoxGroup',
            'extension/RadioTab',
            'demo'
        ],
        function (ui, $) {
            var datasource = [
                {
                    id: 'ER',
                    text: 'ER',
                    value: 'ER',
                    panel: 'ER'
                },
                {
                    id: 'ESUI',
                    text: 'ESUI',
                    value: 'ESUI',
                    panel: 'ESUI'
                },
                {
                    id: 'EF',
                    text: 'EF',
                    value: 'EF',
                    panel: 'EF'
                }
            ];

            var datasource2 = [
                {
                    id: 'ER2',
                    text: 'ER2',
                    value: 'ER2',
                    panel: 'ER2'
                },
                {
                    id: 'ESUI2',
                    text: 'ESUI2',
                    value: 'ESUI2',
                    panel: 'ESUI2'
                }
            ];
            ui.init(
                document.body,
                {
                    properties : {
                        'box-group-horizontal': {
                            datasource: datasource
                        },
                        'box-group-vertical': {
                            datasource: datasource2
                        },
                        'box-group-horizontal-html': {}
                    }
                }
            );
            ui.get('box-group-horizontal').on(
                'change',
                function () {
                    console.log('已选值：' + this.getValue());
                }
            );
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
